<template>
	<div class="main-container">
		<div class="left-container">
			<UserCard></UserCard>
			<BilibiliCard style="margin-top:20px;"></BilibiliCard>
		</div>
		<div class="middle-container">
			<Panel style="margin-top: 20px;"></Panel>
			<Panel style="margin-top: 20px;"></Panel>
			<Panel style="margin-top: 20px;"></Panel>
			<div style="margin-top: 20px; text-align: center; margin-bottom: 50px;"><Page :total="100" show-sizer/></div>
		</div>
		<div class="right-container">
			<Notice></Notice>
			<ApplicationCard style="margin-top: 20px;"></ApplicationCard>
		</div>
	</div>
</template>

<script>
	import UserCard from './UserCard'
	import BilibiliCard from './BilibiliCard'
	import Menu from './Menu'
	import Panel from './Panel'
	import Notice from './Notice'
	import ApplicationCard from './ApplicationCard'

	export default {
		name: 'BodyContainer',
		components: {
			UserCard: UserCard,
			BilibiliCard: BilibiliCard,
			Menu: Menu,
			Panel: Panel,
			Notice: Notice,
			ApplicationCard: ApplicationCard
		}
	}
</script>

<style scoped>
.main-container{
	display: flex;
	justify-content: center;
}

.left-container{
	width: 18%;
}

.middle-container{
	width: 40%;
	border-radius: 10px;
	padding: 0px 20px;
}

.right-container{
	width: 18%;
	border-radius: 10px;
}
</style>
